<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" media="(device-height: 568px)">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="HandheldFriendly" content="True">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title></title>
    <link rel="stylesheet" type="text/css" media="all" href="../css/reset.css" />
    <link rel="stylesheet" type="text/css" media="all" href="../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" media="all" href="../css/style.css" />

    <script type="text/javascript" src="../js/common/jquery-2.1.1.min.js"></script>
    <script src="../js/common/swiper.jquery.js" type="text/javascript"></script>
    <script type="text/javascript" src="../js/common/jquery.SuperSlide.2.1.1.js"></script>
    <script src="../js/common/js.js" type="text/javascript"></script>
    <script src="../js/home_shopClassifyLists.js" type="text/javascript"></script>
    <style>
        body{
            background:white;
        }
        .shopDetail{
            margin-bottom:.2rem;
        }
    </style>
</head>

<body>
    <!-- 顶部 -->
    <div class="header">
        <a href="fox://setBack" class="hele"></a>
        <h1 class="hetitle">石材商品</h1>
        <a href="javascript:;" class="helr searchBtn"><img class="shareIcon" src="../img/search.png" alt=""></a>
        <div class="searchInput">
            <div class="inputBtn"><input type="text" placeholder="请输入要搜索的内容"></div><img class="shareIcon searchIcon" src="../img/search.png" alt="">
        </div>
    </div>
    <!-- 搜索结果内容 -->
    <div id="page" class="page m2">
        <!-- 综合、字母、颜色 -->
        <ul class="h88 tab">
            <li class="tabItem classifyTab" onclick="dialog('#d1')" style="color:#ff5203;" data-num="1"><span class="classifyName">分类</span><img src="../img/shnavpic.png"></li>
            <li class="tabLine firstcodeTab"></li>
            <li class="tabItem" onclick="dialog('#d2')" data-num="1"><span class="firstcodeName">字母</span><img src="../img/shnavpic.png" alt=""></li>
            <li class="tabLine"></li>
            <li class="tabItem colorTab" onclick="dialog('#d3')" data-num="1"><span class="colorName">颜色</span><img src="../img/shnavpic.png" alt=""></li>
        </ul>
        <!-- 商品列表 -->
        <div class="cloneLists"></div>
        <p class="notMore">别拉了 - 疼</p>
    </div>

    <!-- 综合下拉遮罩 -->
    <div class="mask"></div>
    <div class="dialog" id="d1">
        <div class="classifyLists p30">
        </div>
    </div>
    <input type="hidden" class="category_id" data-category_id="">
    <!-- 字母下拉框 -->
    <div class="dialog" id="d2">
        <div class="searchLists">
            <div class="letter26">
                <a href="javascript:;" data-code="all">全部</a>
                <a href="javascript:;" data-code="A">A</a>
                <a href="javascript:;" data-code="B">B</a>
                <a href="javascript:;" data-code="C">C</a>
                <a href="javascript:;" data-code="D">D</a>
                <a href="javascript:;" data-code="E">E</a>
                <a href="javascript:;" data-code="F">F</a>
                <a href="javascript:;" data-code="G">G</a>
                <a href="javascript:;" data-code="H">H</a>
                <a href="javascript:;" data-code="I">I</a>
                <a href="javascript:;" data-code="J">J</a>
                <a href="javascript:;" data-code="K">K</a>
                <a href="javascript:;" data-code="L">L</a>
                <a href="javascript:;" data-code="M">M</a>
                <a href="javascript:;" data-code="N">N</a>
                <a href="javascript:;" data-code="O">O</a>
                <a href="javascript:;" data-code="P">P</a>
                <a href="javascript:;" data-code="Q">Q</a>
                <a href="javascript:;" data-code="R">R</a>
                <a href="javascript:;" data-code="S">S</a>
                <a href="javascript:;" data-code="T">T</a>
                <a href="javascript:;" data-code="U">U</a>
                <a href="javascript:;" data-code="V">V</a>
                <a href="javascript:;" data-code="W">W</a>
                <a href="javascript:;" data-code="X">X</a>
                <a href="javascript:;" data-code="Y">Y</a>
                <a href="javascript:;" data-code="Z">Z</a>
            </div>
        </div>
    </div>
    <input type="hidden" class="first_code" data-first_code="">
    <!-- 颜色下拉框 -->
    <div class="dialog" id="d3">
        <div class="searchLists">
            <div class="colorList p30"></div>
        </div>
    </div>
    <input type="hidden" class="color_id" data-color_id="">
    <!-- 搜索 -->
    <input type="hidden" class="keys" data-keys="">

</body>
<script type="text/javascript">
    $(function() {
        $('.mask').css('top', '2.08rem');
        $('.dialog').css('top', '2.08rem');
        //次导航图标翻转效果
        $(".tab .tabItem").click(function() {
            $(this).css("color", "#ff5203").siblings(".tabItem").css("color", "#333");
            var num = $(this).attr("data-num")
            if (num == 1) {
                $(this).addClass("on").siblings(".tabItem").removeClass("on")
                $(this).attr("data-num", 2).siblings(".tabItem").attr("data-num", 1)
            }

        })
    })
    //弹窗取消按钮高度
    $(document).on('click', ':not(.searchLists)', function() {
        dialogClose()
        $(".tabItem").attr("data-num", 1).removeClass("on")
        return;
    })
    //防止冒泡
    $(".tabItem").on('click', function(event) {
        event.stopPropagation();
    });
</script>

</html>